<template>
  <a-form class="smart-query-form" :model="queryForm">
    <a-row class="smart-query-form-row">
      <a-form-item name="dataSource" label="数据源" class="smart-query-form-item">
        <a-select
          style="width: 150px"
          v-model="queryForm.dataSource"
          allowClear
          placeholder="请选择数据源"
          :options="options"
        >
        </a-select>
      </a-form-item>

      <a-form-item name="dataSource" label="时间" class="smart-query-form-item">
        <a-range-picker v-model:value="queryForm.time" />
      </a-form-item>

      <a-form-item class="smart-query-form-item smart-margin-left10">
        <a-button type="primary">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button class="smart-margin-left10">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>

  <a-card size="small" :bordered="false" :hoverable="true">
    <a-table :columns="columns" :dataSource="tableData"></a-table>
  </a-card>
  <a-card size="small" :bordered="false" :hoverable="true">
    <div class="chart"><Pie /></div>
    <a-space wrap> <a-button type="primary" class="button">数据导出</a-button></a-space>
  </a-card>
</template>
<script setup>
import { reactive, ref } from "vue";
import Pie from "/@/components/management/pie.vue";
const queryForm = reactive({
  dataSource: "",
  time: "",
  pageNum: 1,
  pageSize: 10,
});
const options = reactive([
  {
    value: "a1",
    label: "a1",
  },
  {
    value: "a2",
    label: "a2",
  },
]);

const columns = ref([
  {
    title: "数据源类型",
    dataIndex: "DataSourceType",
    width: 120,
  },
  {
    title: "Scope",
    dataIndex: "Scope",
    width: 120,
  },
  {
    title: "数据项类别",
    dataIndex: "DataItemCategory",
    width: 120,
  },
  {
    title: "时间戳",
    dataIndex: "Timestamp",
    width: 180,
  },
  {
    title: "排放量",
    dataIndex: "EmissionValue",
    width: 120,
  },
  {
    title: "备注",
    dataIndex: "Remarks",
  },
]);

const tableData = ref([
  {
    DataSourceType: "自控燃烧设备",
    Scope: "S1",
    DataItemCategory: "燃烧设备",
    Timestamp: "2024-05-01 10:00",
    EmissionValue: "100.5",
    Remarks: "燃烧设备 1",
  },
  {
    DataSourceType: "工艺过程",
    Scope: "S1",
    DataItemCategory: "工艺技术",
    Timestamp: "2024-05-02 104:00",
    EmissionValue: "150.3",
    Remarks: "环节 A1",
  },
]);

const chartOption = {
  title: {
    text: "Stacked Line",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "Email",
      type: "line",
      stack: "Total",
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: "Union Ads",
      type: "line",
      stack: "Total",
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: "Video Ads",
      type: "line",
      stack: "Total",
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: "Direct",
      type: "line",
      stack: "Total",
      data: [320, 332, 301, 334, 390, 330, 320],
    },
    {
      name: "Search Engine",
      type: "line",
      stack: "Total",
      data: [820, 932, 901, 934, 1290, 1330, 1320],
    },
  ],
};
</script>
<style lang="less" scoped>
.detail-header {
  background-color: #fff;
  padding: 10px;
}

.ant-card {
  margin-bottom: 10px;
  min-height: 400px;
}
.chart {
  width: 1200px;
}

.ant-space {
  width: 100%;
  display: flex;
  justify-content: center;
}

.button {
  margin: 30px 0;
}
</style>
